<template>
	<div class="news_list table-theme">
		<head-title title="营销--资讯列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="classifyList"
						:value="class_id"
						placeholder="资讯分类"
						type="class_id"
						@value="setSelectValue"
						label-name="class_name"
						value-name="class_id"
					>
					</select-view>
					<select-view
						:option-list="sortList"
						:value="ase"
						placeholder="选择排序"
						type="ase"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add"><el-button type="primary" @click="data(1)">添加资讯</el-button></div>
				</div>
			</div>
			<p class="data-number">总资讯数：{{ total }}</p>
			<el-table :data="newsList" border>
				<el-table-column label="id" align="center" prop="information_id"></el-table-column>
				<el-table-column label="标题" align="center" prop="name"></el-table-column>
				<el-table-column label="图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="链接" align="center" prop="url">
					<template slot-scope="scope">
						<div v-if="scope.row.type==2">
							<a :href="`${$domain}web/merchant/#/pages/news/news-info?id=${scope.row.information_id}`" target="_blank">
								{{ `${$domain}web/merchant/#/pages/news/news-info?id=${scope.row.information_id}` }}
							</a>
						</div>
						<div v-if="scope.row.type==1">{{scope.row.url}}</div>
					</template>
				</el-table-column>

				<el-table-column label="类型" align="center" prop="class_name"></el-table-column>

				<el-table-column label="排序" align="center" prop="sort" width="180"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.information_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="data(0, scope.row.information_id)">修改</el-button>
						<!-- <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
	</div>
</template>

<script>
import ImgPopover from '@/components/ImgPopover';
import SelectView from "@/components/SelectView";
export default {
	components: {
		ImgPopover,
		SelectView
	},
	data() {
		return {
			newsList: [],
			total: 0,totalData: 0, 
			ase: '',
			class_id: '',
			sortList: [
				{
					value: 1,
					label: '升序'
				},
				{
					value: 2,
					label: '降序'
				}
			],
			page: 0,
			classifyList: [],
			order_by: 'add_time'
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				order_by: this.order_by,
				asc: this.ase,
				class_id: this.class_id,
				store_id: localStorage.getItem('store_id')
			};
			this.$http(this.$ApiList.newsList, data).then(res => {
				this.newsList = [];
				res.datas.forEach(item => {
					this.newsList.push(item);
				});

				this.total = res.counts;
			});
		},
		getClass() {
			this.$http(this.$ApiList.newsClassify, '').then(res => {
				this.classifyList = res.datas;
			});
		},
		// 上下架
		upDown(e, id) {
			let data = {
				information_id:id,
				status : e
			}
			this.$http(this.$ApiList.OutNews, data).then(res => {
				this.$layer.msg('操作成功');
			});
		},
		// 添加或者修改
		data(isAdd, id) {
			if (isAdd == 1) {
				this.$router.push({ path: '/news_data', query: { isAdd: isAdd } });
			} else {
				this.$router.push({ path: '/news_data', query: { isAdd: isAdd, id: id } });
			}
		},
		sort() {
			this.order_by = 'sort';
			this.init();
		},
		clientScreen() {
			this.init();
		},
		refreshPage() {
			this.page = 1;
			this.ase = '';
			this.class_id = '';
			this.init()
		},
		setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'class_id':
						this.class_id = value
						break;
					case 'ase':
						this.ase = value
						break;
					default:
						break;
				}
				this.init()
			}
	},
	created() {
		this.init();
		this.getClass();
	}
};
</script>
<style lang="scss" scoped>
</style>
